<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

   <body>
      <ui:composition template="/templates/template.xhtml">

         <ui:define name="title">RichFaces Extented DataTable Sample</ui:define>

         <ui:define name="head">
            <style>
               .even-row {
                  background-color: #FCFFFE;
               }
               .odd-row {
                  background-color: #ECF3FE;
               }
               .row-hover {
                  background-color: #FFEBDA !important;
                  cursor: pointer;
               }
            </style>
         </ui:define>

         <ui:define name="body">
            <h:form id="form">
               <rich:extendedDataTable id="table" value="#{carsBean.allInventoryItems}" var="car"
                                       rowClass="row" rowClasses="odd-row, even-row"
                                       style="height:294px;width:625px" styleClass="stable">
                  <rich:column width="100px">
                     <f:facet name="header">
                        <h:outputText value="Vendor " />
                     </f:facet>
                     <a4j:outputPanel>
                        <rich:dragSource type="TREE" dragValue="TREE-DRAG-VALUE" />
                        <rich:dropTarget acceptedTypes="TREE" dropValue="TREE-DROP-VALUE"
                                         dropListener="#{carsBean.processDrop}" render="@form" />
                        <h:outputText value="#{car.vendor}" />
                     </a4j:outputPanel>
                  </rich:column>
                  <rich:column width="100px">
                     <f:facet name="header">
                        <h:outputText value="Model" />
                     </f:facet>
                     <a4j:outputPanel>
                        <rich:dragSource type="TREE" dragValue="TREE-DRAG-VALUE" />
                        <rich:dropTarget acceptedTypes="TREE" dropValue="TREE-DROP-VALUE"
                                         dropListener="#{carsBean.processDrop}" render="@form" />
                        <h:outputText value="#{car.model}" />
                     </a4j:outputPanel>
                  </rich:column>
                  <rich:column width="100px">
                     <f:facet name="header">
                        <h:outputText value="Price" />
                     </f:facet>
                     <h:outputText value="#{car.price}" />
                  </rich:column>
                  <rich:column  width="100px" filter="#{carsFilteringBean.mileageFilterImpl}">
                     <f:facet name="header">
                        <h:outputText value="Mileage" />
                     </f:facet>
                     <h:outputText value="#{car.mileage}" />
                  </rich:column>
                  <rich:column width="200px">
                     <f:facet name="header">
                        <h:outputText value="VIN " />
                     </f:facet>
                     <h:outputText value="#{car.vin}" />
                  </rich:column>
               </rich:extendedDataTable>
            </h:form>

            <rich:jQuery selector=".stable tr .row" event="mouseover"
                         query="jQuery(this).addClass('row-hover')"/>
            <rich:jQuery selector=".stable tr .row" event="mouseout"
                         query="jQuery(this).removeClass('row-hover')"/>
         </ui:define>
      </ui:composition>
   </body>
</html>